﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Selectors</title>
    
    <meta name="keywords" content="selector selectors css"/>
    
    

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="selectors.css" rel="stylesheet" />
    <script src="selectors.js"></script>
</head>
<body>
    <div class="selectors fragment">
        <header aria-label="Header content" role="banner">
                        <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">CSS Selectors</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <style id="styleSection"></style>
            <div id="grid">
                <div id="labelCSS" class="label">CSS</div>
                <div id="input" class="section watermark" contenteditable>Enter CSS style rules here</div>

                <div id="labelHTML" class="label">HTML</div>
                <div id="html" class="section">
                    <pre contenteditable>
&lt;div id="Div1"&gt;
    &lt;p&gt;Lorum ipsum&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;dolar&lt;/li&gt;
        &lt;li&gt;sit&lt;/li&gt;
        &lt;li&gt;amet&lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;table id="myTable" data-author="psmith"&gt;
        &lt;tr&gt;&lt;td&gt;2012&lt;/td&gt;&lt;td&gt;75&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;2011&lt;/td&gt;&lt;td&gt;67&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;2010&lt;/td&gt;&lt;td&gt;58&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
                        
    &lt;div class="fancy bold"&gt;1&lt;/div&gt;
    &lt;div class="fancy bold"&gt;2&lt;/div&gt;
    &lt;div id="lorem"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Etiam congue lacus non magna pulvinar mollis.	Donec vulputate
	turpis sit amet risus lacinia sollicitudin egestas lorem
	aliquam. Pellentesque eu felis nunc, nec pulvinar turpis.
	Vivamus non tempus ipsum. Ut dictum facilisis lacus, at
	sodales turpis rhoncus at. Cras imperdiet commodo porta. Ut
	ac erat sapien.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
                </pre>
                </div>

                <div id="labelRender" class="label">#render</div>
                <div id="render" class="section">
                </div>
            </div>
        </section>
    </div>
</body>
</html>